<template>
<div id="expressPub">
         <!--后退-->
        <img class="back" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <div id="taskInfo">
            <div class="card" v-for="(item,index) in logistics" v-show="isShow">
                <section id="Logistics">
                    <div>
                        <img class="bounty" src="../../assets/tabber/bounty.png" alt="">
                            <p>
                                <input onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" placeholder="请输入赏金" type="text" v-model="logistics[index].amount" >
                                <textarea placeholder="请将短信复制于此" maxlength="147" type="text" v-model="logistics[index].taskExplain"></textarea>
                            </p>
                        <img class="chanel" src="../../assets/tabber/chanel.png" alt="" @click="deleteSel(index)">
                    </div>
                    <div class="selection">
                        <select v-model="logistics[index].common1">
                            <option disabled value="">请选择快递商家</option>
                            <option>顺丰</option>
                            <option>圆通</option>
                            <option>汇通</option>
                            <option>中通</option>
                            <option>天天</option>
                            <option>EMS</option>
                            <option>其他</option>
                        </select>
                        <select v-model="logistics[index].common2">
                            <option disabled value="">请选择快递大小</option>
                            <option>大件</option>
                            <option>中件</option>
                            <option>小件</option>
                        </select>
                    </div>
                </section>
            </div>
        </div>
        
        <button id="addTo" @click="addTaskCard()">
            <img src="../../assets/tabber/addImg.png" alt="">
        </button>

        <div class="GenderSelection">
            <p class="title">配送人员性别要求</p>
            <p class="genders">
              <el-radio v-model="radio" label="1"><img src="../../assets/homepage/un.png" alt=""></el-radio>
              <el-radio v-model="radio" label="2"><img src="../../assets/homepage/gril.png" alt=""></el-radio>
              <el-radio v-model="radio" label="3"><img src="../../assets/homepage/boy.png" alt=""></el-radio>
            </p>
            <p class="sureSel" @click="sendParams">确定</p>
        </div>
</div>
</template>
<script>
export default {
  data () {
    return {
        isShow:true,
        SMS:"",
        amount:"",
        size:"",
        businsess:"",
        radio:"1",
        logistics:[
           
        ],
    }
  },
  created(){
      
      
  },
  methods:{
      deleteSel(index){
          this.logistics.splice(index,1)
      },
      addTaskCard(){
          if(this.logistics.length == 3){
              return
          }
          var obj = {}
          obj.taskType = '3',
          obj.taskName = '快递代取',
          obj.taskExplain = undefined,
          obj.amount = undefined,
          obj.common1 = undefined,
          obj.common2 = undefined,
          this.logistics.push(obj)
    },
    sendParams(){
        
        if(this.radio=='1'){
            this.logistics.forEach((item)=>{
                item.allSum = '1';
                item.time = Date.parse(new Date());
            })
        }
        if(this.radio=='2'){
            this.logistics.forEach((item)=>{
                item.womanSum = '1';
                item.time = Date.parse(new Date());
            })
        }
        if(this.radio=='3'){
            this.logistics.forEach((item)=>{
                item.manSum = '1';
                item.time = Date.parse(new Date());
            })
        }
       
        this.$router.push({
            path: '/exPubCom',
            name: 'exPubCom', 
            query: {
                name: 'exPubCom',
                data:this.logistics,
            }
            
        })
    }
  }
}
</script>
<style>
#expressPub{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/bg.png);
}
#expressPub .back{
    height:0.8rem;
    width:0.5rem;
    margin-top:1.25rem;
    margin-left:1.25rem
}
#expressPub #taskInfo{
    height:73%;
    background:none;
    overflow:scroll;
}
#expressPub .card{
    padding:1rem 1.5rem;
    height:14rem;
}
#expressPub #addTo{
    position:fixed;
    bottom:10rem;
    left:20rem;
    width:3.5rem;
    text-align:center;
    line-height:3.5rem;
    height:3.5rem;
    background:#29a193;
    border-radius:50%;
    opacity:0.8;
}
#expressPub #addTo:hover{
    opacity:1;
}
#expressPub #addTo img{
    height:2.5rem;
    width:2.5rem;
}
#expressPub .GenderSelection{
    height:8rem;
    width:80%;
    margin:0.75rem auto;
    background:#fff;
    position:absolute;
    bottom:0.75rem; 
    left:1.9rem;
    box-shadow:0.1rem 0.1rem 0.5rem 0.15rem #e2e2e2;
    border-radius:13px;
}
#expressPub .GenderSelection .title{
    font-size:0.8rem;
    color:#29a193;
    padding:0.75rem 0px 0px 0.75rem;
}
#expressPub .GenderSelection .genders{
    display:flex;
    justify-content:space-between;
    margin-top:0.25rem;
    padding:0.75rem 0.75rem 0px 0.75rem;
}
#expressPub .GenderSelection .genders img{
    height:1.75rem;
    width:2.2rem;
}
#expressPub .GenderSelection .sureSel{
    width:100%;
    text-align:center;
    height:3rem;
    line-height:3rem;
    margin-top:1rem;
    border-radius:13px;
    background:#29a193;
    color:#fff;
}
#expressPub #Logistics{
    background:#FFF;
    border-radius:13px;
    box-shadow:0.1rem 0.1rem 0.5rem 0.15rem #e2e2e2;
    padding:0.6rem 0.8rem;
}
#expressPub #Logistics div:nth-child(1){
    display:flex;
}
#expressPub #Logistics input{
    font-size:0.8rem;
    padding:0.4rem;
    height:2rem;
    width:100%;
    background:#f8f8f8;
    border-radius:4px;
    margin-left:0.5rem;
    margin-top:0.75rem;
}
#expressPub #Logistics textarea{
    padding:0.4rem;
    font-size:0.8rem;
    height:6rem;
    width:100%;
    background:#f8f8f8;
    border-radius:4px;
    margin-left:0.5rem;
    margin-top:0.75rem;
}
#expressPub #Logistics .bounty{
    height:1.5rem;
    width:1.5rem;
    margin-top:1.5rem;
}
#expressPub #Logistics .chanel{
    height:1rem;
    width:1rem;
    margin-left:0.8rem;
}
#expressPub #Logistics .selection{
    width:85%;
    margin:0.25rem auto;
    display:flex;
    font-size:0.6rem;
    justify-content:space-between;
}
#expressPub #Logistics select{
    width:45%;
    height:1.5rem;
    border-radius:8px;
    background:#fff;
    border:1.5px solid #29a193;
}

</style>